// 编辑器滚动条 mixin
@mixin editor-scrollbar() {
  overflow: auto;
  
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    position: absolute;
  }
  
  &::-webkit-scrollbar-track {
    width: 8px;
    background: transparent;
  }
  
  &:hover::-webkit-scrollbar-thumb {
    background-color: var(--editor-scrollbar-thumb-color);
    background-clip: padding-box;
    border-radius: 4px;
    transition: background-color 0.3s;
    cursor: pointer;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--editor-scrollbar-thumb-hover-color);
  }
}

// 页面分隔线 mixin
@mixin editor-page-divider() {
  display: block;
  white-space: nowrap;
  letter-spacing: 100vw;
  overflow: hidden;
  width: 100%;
  user-select: none;
  border: none;
  height: unset;
  
  &::before {
    display: block;
    content: '\2000';
    overflow: hidden;
    text-decoration-line: line-through;
    text-decoration-style: solid;
    text-decoration-thickness: 0.1em;
  }
  
  &::after {
    overflow: hidden;
  }
  
  &[data-type='single'] {
    &::before {
      text-decoration-style: solid;
    }
  }
  
  &[data-type='single-bold'] {
    &::before {
      text-decoration-style: solid;
      text-decoration-thickness: 0.3em;
    }
  }
  
  &[data-type='double'] {
    &::before {
      text-decoration-style: double;
    }
  }
  
  &[data-type='dotted'] {
    &::before {
      text-decoration-style: dotted;
    }
  }
  
  &[data-type='dashed'] {
    &::before {
      text-decoration-style: dashed;
    }
  }
  
  &[data-type='dashed-double'] {
    &::before {
      text-decoration-style: dashed;
      text-decoration-thickness: 0.1em;
      margin-top: 0.5em;
      line-height: 0.4em;
    }
    
    &::after {
      display: block;
      content: '\2000';
      text-decoration-line: line-through;
      text-decoration-thickness: 0.1em;
      text-decoration-style: dashed;
      line-height: 0.4em;
      margin-bottom: 0.5em;
    }
  }
  
  &[data-type='double-bold-top'] {
    &::before {
      text-decoration-style: solid;
      text-decoration-thickness: 0.3em;
      margin-top: 0.5em;
      line-height: 0.4em;
    }
    
    &::after {
      display: block;
      content: '\2000';
      text-decoration-line: line-through;
      text-decoration-thickness: 0.05em;
      text-decoration-style: solid;
      line-height: 0.4em;
      margin-bottom: 0.5em;
    }
  }
  
  &[data-type='double-bold-bottom'] {
    &::before {
      text-decoration-style: solid;
      text-decoration-thickness: 0.05em;
      margin-top: 0.5em;
      line-height: 0.4em;
    }
    
    &::after {
      display: block;
      content: '\2000';
      text-decoration-line: line-through;
      text-decoration-thickness: 0.3em;
      text-decoration-style: solid;
      line-height: 0.4em;
      margin-bottom: 0.5em;
    }
  }
  
  &[data-type='wavy'] {
    &::before {
      text-decoration-style: wavy;
      text-decoration-thickness: 0.12em;
    }
  }
}

// 按钮 hover 效果 mixin
@mixin editor-button-hover() {
  transition: all 0.2s ease-in-out;
  
  &:hover {
    background-color: var(--editor-button-hover-background);
  }
  
  &:active {
    transform: translateY(1px);
  }
}

// 输入框样式 mixin
@mixin editor-input() {
  padding: 8px 12px;
  border: 1px solid var(--editor-border-color);
  border-radius: var(--editor-radius);
  background-color: var(--editor-color-white);
  color: var(--editor-text-color);
  font-family: var(--editor-font-family);
  font-size: var(--editor-font-size);
  transition: border-color 0.2s ease-in-out;
  
  &:focus {
    outline: none;
    border-color: var(--editor-primary-color);
    box-shadow: 0 0 0 2px rgba(52, 128, 249, 0.1);
  }
  
  &::placeholder {
    color: var(--editor-text-color-light);
  }
}

// 卡片样式 mixin
@mixin editor-card() {
  background-color: var(--editor-color-white);
  border: 1px solid var(--editor-border-color);
  border-radius: var(--editor-radius-medium);
  box-shadow: var(--editor-shadow);
  padding: 16px;
}

// 工具提示样式 mixin
@mixin editor-tooltip() {
  position: relative;
  
  &::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--editor-color-black);
    color: var(--editor-color-white);
    padding: var(--editor-tooltip-content-padding);
    border-radius: var(--editor-radius);
    font-size: var(--editor-font-size-small);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 1000;
    pointer-events: none;
  }
  
  &:hover::before {
    opacity: 1;
    visibility: visible;
  }
}
